<template>
  <div>
      <div class="foot">
            <router-link to="/Home" class="item " tag="div">
              <span class="iconfont icon-shouye"></span>
              <span>首页</span>
            </router-link>
            <!-- <router-link to="/classroom" class="item" tag="div">
              <span class="iconfont icon-ketang"></span>
              <span>课堂</span>
            </router-link> -->
            <router-link to="/shopping" class="item" tag="div">
              <span class="iconfont icon-shaogouwu"></span>
              <span>商城</span>
            </router-link>
            <router-link to="/collect" class="item" tag="div">
              <span class="iconfont icon-shoucang"></span>
              <span>收藏</span>
            </router-link>
            <router-link to="/mine" class="item" tag="div">
              <span class="iconfont icon-biaoqiankuozhan_wode-150"></span>
              <span>我的</span>
            </router-link>
          
      </div>
  </div> 
</template>

<script>
export default {

}
</script>

<style lang="less">
    .foot{
      width: 100%;
      height: 56px;
      position: fixed;
      bottom: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fdfbfb;
      .item{
        width: 25%;
        text-align: center;
        color: #b0b0b0;
        
        span{
          display: block;
          width: 100%;
          &.iconfont{
            font-size: 20px;
            margin-bottom: 6px;
          }
          &.icon-shouye{
            font-size: 18px;
          }
          &.icon-biaoqiankuozhan_wode-150{
            font-size: 24px;
             margin-bottom: 3px;
          }
        }
        font-size: 12px;
        font-weight: 550;
        &.itemcon{
          color: #3c3c3c;
        }
      }
    }
</style>